﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_FrontLayout.cshtml";
}

<div id="slider">
    <!-- #slider -->
    <div class="slider-inner">
        <ul>
            <!-- Slide start -->
            <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" data-saveperformance="on">
                <!-- MAIN IMAGE -->
                <img src="../Images/slider/slidebg.jpg" alt="slidebg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                <!-- LAYER NR. 1 -->
                <div class="tp-caption lft customout rs-parallaxlevel-0" data-x="700" data-y="0" data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="700"
                     data-start="1550" data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" style="z-index: 2;">
                    <img src="../Images/slider/dummy.png" alt="" data-lazyload="../Images/slider/dasha.png">
                </div>
                <!-- LAYER NR. 4 -->
                <div class="tp-caption grey_heavy_72 skewfromrightshort tp-resizeme rs-parallaxlevel-0" data-x="227" data-y="104" data-speed="500" data-start="2250" data-easing="Power3.easeInOut" data-splitin="chars" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1"
                     style="z-index: 5; max-width: auto; max-height: auto; white-space: nowrap;">
                    都更好!
                </div>
                <!-- LAYER NR. 5 -->
                <div class="tp-caption customin rs-parallaxlevel-0" data-x="116" data-y="134" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="500"
                     data-start="2000" data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" style="z-index: 6;">
                    <img src="../Images/slider/dummy.png" alt="" data-lazyload="../Images/slider/redbg.png">
                </div>
                <!-- LAYER NR. 6 -->
                <div class="tp-caption black_heavy_60 skewfromleftshort tp-resizeme rs-parallaxlevel-0" data-x="28" data-y="83" data-speed="500" data-start="1850" data-easing="Power3.easeInOut" data-splitin="chars" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1"
                     style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;">
                    现在
                </div>
                <!-- LAYER NR. 7 -->
                <div class="tp-caption white_heavy_40 customin tp-resizeme rs-parallaxlevel-0" data-x="128" data-y="137" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                     data-speed="500" data-start="2050" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">
                    甚至
                </div>
                <!-- LAYER NR. 8 -->
                <div class="tp-caption grey_regular_18 customin tp-resizeme rs-parallaxlevel-0" data-x="34" data-y="268" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                     data-speed="500" data-start="2600" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.05" data-endelementdelay="0.1" style="z-index: 9; max-width: auto; max-height: auto; white-space: nowrap;">
                    <div style="text-align:center;">
                        我们的产品有很多新特性
                        <br />可以很好服务于你的客户、企业和顾客。
                        <br />
                    </div>
                </div>
                <!-- LAYER NR. 9 -->
                <div class="tp-caption black_thin_34 customin tp-resizeme rs-parallaxlevel-0" data-x="183" data-y="188" data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
                     data-speed="500" data-start="2350" data-easing="Back.easeOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" style="z-index: 10; max-width: auto; max-height:auto; white-space: nowrap;">
                    在每种情况下
                </div>
                <!-- LAYER NR. 10 -->
                <div class="tp-caption customin rs-parallaxlevel-0" data-x="6" data-y="240" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="300"
                     data-start="2500" data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" style="z-index: 11;">
                    <img src="../Images/slider/dummy.png" alt="" data-lazyload="../Images/slider/greyline.png">
                </div>
                <!-- LAYER NR. 11 -->
                <div class="tp-caption customin tp-resizeme rs-parallaxlevel-0" data-x="73" data-y="352" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="500"
                     data-start="2900" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-linktoslide="next" style="z-index: 12; max-width: auto; max-height: auto; white-space: nowrap;">
                    <a href='@Url.Action("Service")' class='largeredbtn'>现在就买</a>
                </div>
                <!-- LAYER NR. 12 -->
                <div class="tp-caption arrowicon customin rs-parallaxlevel-0" data-x="203" data-y="376" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="300"
                     data-start="3200" data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" data-linktoslide="next" style="z-index: 13;">
                    <div class=" rs-slideloop" data-easing="Power3.easeInOut" data-speed="0.5" data-xs="-5" data-xe="5" data-ys="0" data-ye="0">
                        <img src="../Images/slider/dummy.png" alt="" data-ww="18" data-hh="11" data-lazyload="../Images/slider/doublearrow2.png">
                    </div>
                </div>
            </li>
            <!-- Slide start -->
            <li data-transition="slideleft" data-slotamount="7" data-masterspeed="1500" data-saveperformance="on">
                <!-- MAIN IMAGE -->
                <img src="../Images/slider/slidebg1.jpg" alt="slidebg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                <!-- LAYER NR. 1 -->
                <div class="tp-caption lft customout rs-parallaxlevel-0" data-x="650" data-y="150" data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="700"
                     data-start="1550" data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" style="z-index: 2;">
                    <img src="../Images/slider/dummy.png" alt="" data-lazyload="../Images/slider/macbook_air.png">
                </div>
                <!-- LAYER NR. 2 -->
                <div class="tp-caption sfb customout rs-parallaxlevel-0" data-x="430" data-y="195" data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="700"
                     data-start="1400" data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" style="z-index: 3;">
                    <img src="../Images/slider/dummy.png" alt="" data-lazyload="../Images/slider/ipad.png">
                </div>
                <!-- LAYER NR. 3 -->
                <div class="tp-caption lfl customout rs-parallaxlevel-0" data-x="100" data-y="230" data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="700"
                     data-start="1400" data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" style="z-index: 3;">
                    <img src="Images/slider/dummy.png" alt="" data-lazyload="Images/slider/iphone.png">
                </div>
                <!-- LAYER NR. 4 -->
                <div class="tp-caption black_heavy_60 skewfromleftshort tp-resizeme rs-parallaxlevel-0" data-x="100" data-y="75" data-speed="500" data-start="1850" data-easing="Power3.easeInOut" data-splitin="chars" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1"
                     style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;">
                    我们的网站系统支持各种设备！
                </div>
            </li>
        </ul>
    </div>
</div>
<div id="content">
    <section class="services-preview white-bg">
        <div class="container">
            <div class="row service-panel">
                @foreach (var item in (List<Hrm.Core.Service>)ViewBag.Services)
                {
                    <div class="col-md-4">
                        <div class="service-panel-heading">
                            <i class="@item.Glyphicon"></i>
                            <h4>@item.Name</h4>
                        </div>
                        <div class="service-panel-content">
                            <p>@item.Description</p>
                        </div>
                    </div>
                }
            </div>
            <div class="row mb25">
                <div class="col-md-12">
                    <div class="callout dark-light-bg mb20">
                        <p><strong class="mr10">购买</strong> 电子商务网站 + 内容管理系统</p>
                        <a href="@Url.Action("Service")" class="btn btn-danger pull-right"> 现在得到它</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="projects-preview gray-lighter-bg ovh mb10 pt10 pb20">
        <div class="container">
            <div class="row">
                <div class="heading mt20 mb30 text-center">
                    <h3>我们最新的项目</h3>
                </div>
            </div>
        </div>
        <div class="projects relative ovh">
            @foreach (var item in (List<Hrm.Services.PortfolioDto>)ViewBag.Portfolios)
            {
                <div class="col-md-4 img-holder">
                    <div class="bg-img-holder">
                        <img src="@item.ImageUrl" alt="@item.Name">
                    </div>
                    <div class="img-hover text-center">
                        <a href="@Url.Action("PortfolioItem", new { Id = @item.Id })">
                            <div class="img-hover-content">
                                <h5>@item.Name</h5>
                                <p>@item.Description</p>
                                <i class="fa fa-long-arrow-right"></i>
                            </div>
                        </a>
                    </div>
                </div>
            }
        </div>
    </section>
    <section class="blog-preview mb10 pt10 pb20">
        <div class="container">
            <div class="row">
                <div class="heading mt20 mb30 text-center">
                    <h3>我们的博文</h3>
                </div>
            </div>
            <div class="row">
                @foreach (var item in (List<Hrm.Core.BlogPost>)ViewBag.Blogs)
                {
                    <div class="col-md-3 blog-post-short">
                        <div class="blog-title">
                            <h3>
                                <a href="@Url.Action("BlogItem", new { Id = @item.Id })">@item.Title</a>
                            </h3>
                        </div>
                        <div class="blog-meta">
                            <span class="date">
                                <i class="fa fa-calendar s16"></i>
                                @item.CreateDatetime
                            </span>
                            <span class="seperator">/</span>
                            <span class="comments">
                                <a href="@Url.Action("BlogItem", new { Id= @item.Id})#commentsAnchor">
                                    <i class="fa fa-comments"></i> @item.BlogComments.Count
                                </a>
                            </span>
                        </div>
                        <div class="blog-content">
                            <p>
                                @item.Description
                            </p>
                        </div>
                    </div>
                }
            </div>
        </div>
    </section>
    <section class="testimonials-preview gray-lighter-bg mb10 pt10">
        <div class="container">
            <div class="row testimonials text-center">
                <div class="col-md-6 col-md-offset-3">
                    <div class="heading mt20 mb30 text-center">
                        <h3>喜欢我们的开发者</h3>
                    </div>
                    <div id="testimonials-carousel" class="owl-carousel mb20">
                        @foreach (var item in (List<Hrm.Core.TeamMenber>)ViewBag.ClientTeamMenber)
                        {
                            <div class="item">
                                <div class="user-avatar">
                                    <img class="lazyOwl" data-src="@item.UserImg" alt="Tracy">
                                </div>
                                <div class="user-quote">
                                    <p>
                                        @item.Description
                                    </p>
                                </div>
                                <div class="user-name">
                                    <h4>@item.ChineseName</h4>
                                    <span>@item.Position</span>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@section JavascriptSection{
    @Scripts.Render("~/bundles/FrontIndexJs")
    <script src="~/Scripts/pages/home.js"></script>
}
